<template>
  <div class="footer-menu">
    <template v-if="active == 1">
      <div >
        <img :src="homeActive">
        <span>首页</span>
      </div>
      <div @click="toMine">
        <img :src="mine">
        <span>我的</span>
      </div>
    </template>
    <template v-else>
      <div @click="toHome">
        <img :src="home">
        <span>首页</span>
      </div>
      <div >
        <img :src="mineActive">
        <span>我的</span>
      </div>
    </template>
  </div>
</template>

<script>
import home from "../../assets/menu/home.png";
import homeActive from "../../assets/menu/home-active.png";
import mine from "../../assets/menu/mine.png";
import mineActive from "../../assets/menu/mine-active.png";
export default {
  props: ["active"],
  data() {
    return {
      home,
      homeActive,
      mine,
      mineActive
    };
  },
  methods: {
      toMine() {
          console.log(`click mine`)
          this.$routerPush(this, `/pages/mine/Index`)
      },
      toHome() {
          console.log(`click home`)
          this.$routerPush(this, `/pages/homepage/Index`)
      },
  }
};
</script>

<style lang="less" scoped>
.footer-menu {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 999;
  display: flex;
  flex: 2;
  background: #fff;
  padding: 2vw 0;
  div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 1;
    img {
      width: 8vw;
      height: 8vw;
    }
    span {
      width: 100%;
    }
  }
}
</style>